<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模糊搜索匹配</title>
</head>
<body>


<input id="myTitle" list="titles"/>
<datalist id="titles">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>



<script type="text/javascript" src="__STATIC__/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {


        $("#myTitle").on("input propertychange", function () {
            $key = $(this).val();
            searchTitles($key);
        });

        function searchTitles($keys) {
            var configObj = {
                method: "POST",   //数据的提交方式：get和post
                url: "{:Url('Index/search')}",  //数据的提交路劲
                async: "true",   //是否支持异步刷新，默认是true
                data: {"key":$keys},//需要提交的数据
                dataType: "json",   //服务器返回数据的类型，例如xml,String,Json等
                success: function (data) {

                    console.log(data);
                    if(data.code==1){
                        HTMLList(data.message);
                    }
                },    //请求成功后的回调函数
                error: function () {

                },   //请求失败后的回调函数
            }

            $.ajax(configObj);//通过$.ajax函数进行调用。
        }


        function HTMLList(data) {
            var html = "";
            for (var i = 0; i < data.length; i++) {
                html += "<option>" + data[i]['title'] + "</option>";
            }
            $("#titles").html(html);
        }

    });
</script>
</body>
</html>